<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽无高：设置高宽*/
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 盒/框模型：页面任何元素存在于盒模型中
				 组成：外边框+边框+内边距+内容 
				 外边距：margin属性 与border属性方向用法一致
				 语法：属性值1个，代表四个方向，顺时针：上 右 下 左
						属性值2个，代表四个方向，顺时针：上下 右左
											自适应居中： 0 auto
						属性值3个，代表四个方向，顺时针：上 右左 下 
				外边距-方向属性：
				margin-left:数值px；
				margin-right:数值px；
				margin-top:数值px；
				margin-bottom:数值px；
				 */
				margin:100px;/* 上 右 下 左 */
				margin:10px 100px;/* 上下 左右 */
				margin:10px 20px 100px;/* 上 右左 下  */
				margin:10px 20px 30px 100px;/* 上 右 下 左 */
				/* 自适应居中 */
				margin:0 auto;
				/* 元素向下移动100像素 */
				margin-top: 100px;
				/* 内边距：padding属性与margin属性使用方法类似
				 特点：边框与内容
				 语法：属性值1个，代表四个方向，顺时针：上 右 下 左
				 	属性值2个，代表四个方向，顺时针：上下 右左
				 	属性值3个，代表四个方向，顺时针：上 右左 下 
					属性值4个，代表四个方向，顺时针：上 右 下 左
				*/
			   padding:50px;
			   padding:500px 100px;
			   padding:50px 100px 200px;
			   padding:50px 100px 200px 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>